<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="/static/css/shared.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/site.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
    <link href="/static/images/yunmulu_fav.ico" rel="icon">
    <style type="text/css">
        #body1 {
            height: 110px;
            width: 980px;
            margin-left: auto;
            margin-right: auto;
        }

        #body2 {
            width: 980px;
            margin-left: auto;
            margin-right: auto;
            min-height: 600px;
        }

        #body3 {
            height: 50px;
            width: 980px;
            margin-left: auto;
            margin-right: auto;
        }

        .search {
            float: left;
            margin-top: 8px;
        }

        .search input {
            width: 230px;
            height: 26px;
            line-height: 26px;
            font-size: 13px;
            font-family: "Microsoft YaHei", "SimHei";
            margin-left: 20px;
        }

        .search button {
            border: none;
            height: 28px;
            width: 90px;
            cursor: pointer;
            background-color: #0479A7;
            font-family: "Microsoft YaHei", "SimHei";
            color: White;
        }

        .leftlist {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        .leftlist li {
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
            color: White;
        }

        .leftlist li {
        }

        .leftlist a {
        }

        .leftlist span {
            float: right;
            background-color: #0479A7;
            color: White;
            display: block;
            height: 30px;
            width: 190px;
            line-height: 30px;
            margin-top: 8px;
        }

        .leftlist .leftlist_subitem {
            width: 140px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
        }

        .lefttags {
            list-style: none;
            margin-right: 8px;
        }

        .lefttags li {
            float: left;
            margin-left: 8px;
        }

        .lefttags span {
            color: #0479A7;
        }

        #block {
            width: 250px;
            min-height: 600px;
        }

        .sticky {
            position: fixed;
            top: 0px;
        }
    </style>
    {% block style %}{% endblock %}
    <script>
        $(function () {
            var top = $('#block').offset().top;
            $(window).scroll(function () {
                $(document).scrollTop() > top ? $('#block').addClass('sticky') : $('#block').removeClass('sticky');
            });
        });
    </script>
</head>
<body>
<div id="head_holder">
    <div id="head" style="text-align:right;">
        <div id="share_btn" class="clearfix" style="float: left;margin-top: 7px;margin-left: 56px;">
            <!-- JiaThis Button BEGIN -->
            <div class="jiathis_style">
                <a class="jiathis_button_qzone"></a>
                <a class="jiathis_button_tsina"></a>
                <a class="jiathis_button_tqq"></a>
                <a class="jiathis_button_renren"></a>
                <a class="jiathis_button_kaixin001"></a>
                <a href="http://www.jiathis.com/share?uid=1554843" class="jiathis jiathis_txt jtico jtico_jiathis"
                   target="_blank"></a>
                <a class="jiathis_counter_style"></a>
            </div>
            <script type="text/javascript">
                var jiathis_config = {data_track_clickback: 'true'};
            </script>
            <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1554843" charset="utf-8"></script>
            <!-- JiaThis Button END -->
        </div>
        <span>请使用&nbsp;<a target="_blank" href="https://www.google.com/intl/zh-CN/chrome/browser/">Chrome</a>,
            <a target="_blank" href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie">IE8+</a>,
            <a target="_blank" href="http://firefox.com.cn/">Firefox</a>&nbsp;来获取最佳浏览体验</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span style="font-size: 22px; color: rgb(255,255,255);">YUNMULU.NET</span>
    </div>
</div>
<div id="body_holder" class="clearfix">
    <div id="body1">
        <div style="width: 250px; height: 90px; float: left; background-color: #E8E8E8; margin-left: 53px;
				margin-top: 20px;">
            <div style="background-color:#3A3A3A; height: 5px; width: 250px;"></div>
            <a href="/"> <img style="" src="/static/images/yunmulu3.png"/> </a>
        </div>
        <div style="width: 640px; float: left; margin-top: 34px; margin-left: 0px;">
            <h2 style="margin-left: 20px; color: #3C3D41"> 在这里，寻找你的需要的云服务与API。 </h2>

            <div class="search">
                <form method="get" id="searchform" action="/query">
                    <input name="kw" type="text" class="border" value=""/>
                    <button type="submit" style="margin: 0px;">
                        搜索
                    </button>
                </form>
            </div>
        </div>
    </div>
    <div id="body2">
        <table class="clean-table" style="margin-left: 15px;">
            <tbody>
            <tr>
                <td style="width: 36px; border-color: #C1C1C1; border-width: 2px; vertical-align: top;"
                    class="border_top border_bottom border_left"></td>
                <td style="border-color: #E8E8E8; background-color: #E8E8E8; border-width: 2px; vertical-align: top;
							padding: 0px; width: 250px;" class="border_top border_bottom">
                    <div id="block">
                        <ul class="leftlist" style="height: 32px;margin-top: 30px;">
                            <li>
                                <a href="/"><span>首页</span> </a>
                            </li>
                        </ul>
                        <ul class="leftlist" style="height: 180px;">
                            <li>
                                <a href="/products"><span>产品浏览</span> </a>
                            </li>
                            <li>
                                <a href="/products/iaas"><span class="leftlist_subitem">IaaS产品</span> </a>
                            </li>
                            <li>
                                <a href="/products/paas"><span class="leftlist_subitem">PaaS产品</span></a>
                            </li>
                            <li>
                                <a href="/products/saas"><span class="leftlist_subitem">SaaS产品</span></a>
                            </li>
                            <li>
                                <a href="/products/openapi"><span class="leftlist_subitem">开放平台</span></a>
                            </li>
                        </ul>
                        <div style="height: 300px; margin-left: 50px; margin-top: 20px;">
                            <p>
                                产品标签
                            </p>
                            <hr/>
                            <ul class="lefttags">
                                {% for tag in tags %}
                                    <li>
                                        <a target="_blank"
                                           href="{{ url_for('tag',tag=tag.name) }}"><span>{{ tag.name }}</span></a>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </td>
                <td class="border_top border_bottom border_right" style="vertical-align: top; border-color: #C1C1C1;
							border-width: 2px;">
                    <div style="width: 660px; height: 36px; line-height: 36px; margin-top: 12px; margin-bottom: 12px;">
                        <h1 style="font-style: normal; font-size: 22px; margin-left: 14px; margin-right: 16px;">
                            {{ pagetitle }}
                        </h1>
                    </div>
                    <div style="margin-left: 14px; margin-right: 14px;min-height:600px;">
                        {% block content %}{% endblock %}
                    </div>
                    <div id="foot_holder" class="clearfix">
                        <div style="float: left;width: 230px;height: 100px;border-color: #6b6b6b" class="border_right">
                            <p>Achieved by</p>
                            <a target="_blank" href="http://www.python.org/">
                                <img style="max-height: 30px;"
                                     src="http://www.python.org/community/logos/python-powered-w-100x40.png"
                                     border="0"
                                     alt="Flask powered"
                                     title="Flask powered"></a>
                            <a target="_blank" href="http://flask.pocoo.org/">
                                <img style="max-height: 30px;"
                                     src="http://flask.pocoo.org/static/badges/flask-powered.png"
                                     border="0"
                                     alt="Flask powered"
                                     title="Flask powered"></a>
                            <br/>
                            <br/>
                            <script src="http://s13.cnzz.com/stat.php?id=4869304&web_id=4869304&show=pic2"
                                    language="JavaScript"></script>

                        </div>
                        <div style="float: left;width :425px;text-align: center">
                            <p>友情链接</p>
                            <a target="_blank" href="http://www.opening.net.cn/">游与味象</a>
                            <a target="_blank" href="http://scenicstudio.net">景致创意</a></div>

                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="body3">
        <div style="width: 250px; height: 20px; float: left; background-color: #E8E8E8; margin-left: 53px;"></div>
    </div>
</div>
</body>
</html>
